<template>
  <el-affix target="#app">
    <div class="container">
      <div class="nav">
        <div class="title" @click="router.push({ path: '/' })">
          <img class="logo" src="../../../public/static/logo.png" alt="" />
          <span class="logoTitle">预约挂号统一平台</span>
        </div>
        <div class="login">
          <span>帮助中心 </span>
          <div v-if="!name" style="margin: 0 30px" @click="login">
            登陆/注册
          </div>
          <div v-if="name" style="margin: 0 30px">
            <el-dropdown
              @command="handleCommand"
              style="margin: 30px 0; cursor: pointer"
            >
              <span class="el-dropdown-link">
                {{ name
                }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <router-link to="/user/certification">实名认证</router-link>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <router-link to="/user/order">挂号订单</router-link>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <router-link to="/user/patient"
                      >就诊人管理</router-link
                    ></el-dropdown-item
                  >
                  <el-dropdown-item command="logout" @click="userLogout"
                    >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>

      <!-- 登录弹框 -->
      <el-dialog
        v-model="isShowLoginDialog"
        title="用户登录"
        width="800px"
        top="5vh"
      >
        <template #default>
          <div class="dialog">
            <div class="loginForm">
              <div v-if="!loginByWX" style="margin: 10px 0">
                <el-form>
                  <el-form-item>
                    <el-input
                      style="width: 300px"
                      placeholder="请输入手机号码"
                      :prefix-icon="User"
                      v-model="userInputValue"
                      >></el-input
                    >
                  </el-form-item>
                  <el-form-item>
                    <el-input
                      style="width: 300px"
                      placeholder="请输入手机验证码"
                      :prefix-icon="Lock"
                      :disabled="!userCode"
                      v-model="userCode"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      :disabled="!userInputValue"
                      @click="getUserVerificationCode"
                    >
                      获取验证码
                    </el-button>
                  </el-form-item>
                </el-form>
                <el-button
                  type="primary"
                  style="width: 100%"
                  :disabled="!userCode && !userInputValue"
                  @click="userLogin"
                >
                  用户登录
                </el-button>
                <div class="wxCon">
                  <div style="margin: 20px; text-align: center">
                    微信扫码登录
                  </div>
                  <div class="wxLogin" @click="getUserWXSweep">
                    <el-icon><ChatDotRound /></el-icon>
                  </div>
                </div>
              </div>
              <div v-else>
                <div>微信登录</div>
                <div id="wx"></div>
                <div class="wxCon">
                  <div>使用微信扫一扫登录</div>
                  <div>"尚硅谷"</div>
                </div>
                <div class="wxCon">
                  <div style="margin: 20px; text-align: center">
                    手机短信验证码登录
                  </div>
                  <div class="wxLogin" @click="loginByWX = false">
                    <el-icon><Iphone /></el-icon>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="loginImg">
                <div class="item">
                  <img src="../../../public//static/weixinE.png" alt="" />
                  <el-icon style="margin: 0 auto 10px"
                    ><ChatLineRound
                  /></el-icon>
                  <div>微信扫一扫关注<br />"快速预约挂号"</div>
                </div>
                <div class="item">
                  <img src="../../../public//static/phoneE.png" alt="" />
                  <el-icon style="margin: 0 auto 10px"><Message /></el-icon>
                  <div>扫一扫下载<br />"预约挂号"APP</div>
                </div>
              </div>
              <div class="sign">
                <div style="margin-bottom: 20px">XXXX官方指定平台</div>
                <div>快速挂号 安全放心</div>
              </div>
            </div>
          </div>
        </template>
        <template #footer>
          <el-button @click="ShowLoginDialog(false)">关闭窗口</el-button>
        </template>
      </el-dialog>
    </div>
  </el-affix>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ArrowDown, User, Lock } from "@element-plus/icons-vue";

export default defineComponent({
  name: "Nav",
});
</script>
<script lang="ts" setup>
import { ref } from "vue";

import { useRouter } from "vue-router";
import { reqUserLogin, reqUserRegister, reqUserWXSweep } from "@/api/user";

//引入pinia的storeToRefs方法对store对象进行解构 可得到对应的store中的 ref对象类型的值
import { storeToRefs } from "pinia";
//引入对应的pinia仓库 暴露的自定义hooks 是一个方法可以调用
import useLonginStore from "@/store/modules/user";
// pinia仓库初始数据和计算属性
const { name, isShowLoginDialog } = storeToRefs(useLonginStore());
// pinia仓库修改方法
const {
  set_Token,
  remove_Token,
  set_UserInfo,
  remove_UserInfo,
  ShowLoginDialog,
  queryLoginStatus,
} = useLonginStore();

const router = useRouter();

// 是否是扫码页面
const loginByWX = ref(false);
// 用户输入手机号
const userInputValue = ref<string>();
// 用户的验证码
const userCode = ref<string>();

// 点击登录按钮
function login() {
  ShowLoginDialog(true); // 显示登录弹框
}
// 点击获取验证码
async function getUserVerificationCode() {
  try {
    const res = await reqUserRegister(userInputValue.value as string);
    userCode.value = res;
  } catch (error) {}
}
// 用户提交数据 登录
async function userLogin() {
  try {
    // 获取用户信息和请求data参数
    const data = {
      code: userCode.value,
      phone: userInputValue.value,
    };
    const res = await reqUserLogin(data); //获取用户信息和token

    set_UserInfo(res.name); //设置用户的值
    set_Token(res.token); // 设置token

    ShowLoginDialog(false); //关闭登录框
  } catch (error) {}
}
// 用户退出登录
function userLogout() {
  remove_UserInfo("name"); //清空用户信息
  remove_Token(); //清空token
  router.push("/home"); // 回到首页
}

// 用户点击扫码后
async function getUserWXSweep() {
  try {
    loginByWX.value = true; // 打开微信扫码页面

    // 微信扫码功能实现
    const wxRedirectUri = encodeURIComponent(`${window.location.origin}/wx`);
    const res = await reqUserWXSweep(wxRedirectUri);
    // @ts-ignore
    new WxLogin({
      self_redirect: true,
      id: "wx", // 第三方页面显示二维码的容器id
      appid: res.appid, // 应用唯一标识，在微信开放平台提交应用审核通过后获得
      scope: res.scope, // 应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
      redirect_uri: res.redirectUri, // 重定向地址，需要进行UrlEncode
      state: res.state, //用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
      style: "white", // 提供"black"、"white"可选，默认为黑色文字描述。详见文档底部FAQ
      // href: "",
    });

    // 登录轮询检测
    queryLoginStatus();
  } catch (error) {}
}

const handleCommand = (command: string | number | object) => {
  console.log(command);
};
</script>

<style scoped>
.nav {
  display: flex;
  justify-content: space-between;
  height: 80px;
  width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  border-bottom: 2px solid #f7f6f6;
}
.title {
  align-items: center;
  vertical-align: baseline;
  display: flex;
  flex-direction: row;
  margin: 10px;
}
.container {
  width: 100%;
  border-bottom: 2px solid #ebeaea;
}
.container .logo {
  width: 60px;
  height: 60px;
}
.container .logoTitle {
  color: #55a6fe;
  font-size: 22px;
  width: 300px;
  margin-left: 10px;
}
.el-dropdown-link:focus {
  outline: none;
}
.dialog {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.login {
  display: flex;

  text-align: center;
  line-height: 80px;
  color: #7f7f7f;
  font-size: 14px;
}
.loginForm {
  border: 1px solid #e2e1e1;
  border-radius: 5px;
  padding: 20px;
  margin: 20px;
}
.loginImg {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.loginImg .item {
  display: flex;
  flex-direction: column;
}
.loginImg .item div {
  text-align: center;
}
.loginImg img {
  width: 120px;
  height: 120px;
  margin: 20px;
}
.sign {
  font-size: 25px;
  font-weight: 400;
  margin: 20px;
  padding: 40px;
}
.wxCon {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wxLogin {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  border-color: #ff4d4f;
  background: #ff4d4f;
  height: 30px;
  width: 30px;
  font-size: 16px;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: #00ccff;
  display: flex;
  align-items: center;
}
</style>
